<template>
  <div ref="history" class="index-chart"></div>
</template>
<script>
import dayjs from "dayjs";
export default {
  name: "indexChart",
  props: {
    endTime: Number,
    startTime: Number,
    taskId: Number,
    taskName: String
  },

  data() {
    return {
      myChart: null,
      xData: [],
      yData1: [],
      yData2: [],
      yData3: []
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    drawLine() {
      this.myChart = this.$echarts.init(this.$refs.history);
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        legend: {
          top: "2%"
        },
        toolbox: {
          feature: {
            saveAsImage: {
              show: true,
              title: "下载"
            }
          }
        },
        grid: {
          left: "5%",
          right: "8%",
          bottom: "10%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: this.xData
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "count",
            type: "line",
            stack: "Total",
            data: this.yData1
          },
          {
            name: "delay",
            type: "line",
            stack: "Total",
            data: this.yData2
          },
          {
            name: "size",
            type: "line",
            stack: "Total",
            data: this.yData3
          }
        ]
      };
      this.myChart.setOption(option);
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    },
    
    initData() {
      this.$http.batch
        .getDatafactoryState({
          start_time: this.startTime,
          end_time: this.endTime,
          task_id: this.taskId,
          task_name: this.taskName
        })
        .then(data => {
          if(data.length > 0) {
            this.xData = data.map(item => {
              return dayjs(item.date).format("YYYY-MM-DD HH:mm:ss");
            });
            this.yData1 = data.map(item => {
              return item.count;
            });
            this.yData2 = data.map(item => {
              return item.delay;
            });
            this.yData3 = data.map(item => {
              return item.size;
            });
            this.drawLine();
          }
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.index-chart {
  width: 100%;
  height: 350px;
}
</style>
